<template>
  <div class="chat-container">
<!--    <div class="chat-header">-->
<!--      <h2>🤖 智能对话助手</h2>-->
<!--      <p>基于 Dify 工作流的智能问答系统</p>-->
<!--    </div>-->
    
    <div class="chat-history" ref="historyRef">
      <!-- 欢迎消息 -->
      <div class="msg-row ai">
        <div class="msg-bubble welcome">
          <span class="avatar">🤖</span>
          <div class="msg-content">
            <div class="welcome-text">您好！我是您的智能助手</div>
            <div class="welcome-hint">请输入服务器IP和你的问题，我将根据配置文件为你解答</div>
          </div>
        </div>
      </div>
      
      <!-- 对话消息 -->
      <div v-for="msg in props.messages" :key="msg.id">
        <!-- 用户提问 -->
        <div class="msg-row user" v-if="msg.query">
          <div class="msg-bubble">
            <span class="avatar">🧑</span>
            <div class="msg-content">
              <div class="message-text">{{ msg.query }}</div>
            </div>
          </div>
        </div>
        <!-- 机器人回答 -->
        <div class="msg-row ai" v-if="msg.answer || msg.status === 'error'">
          <div class="msg-bubble">
            <span class="avatar">🤖</span>
            <div class="msg-content">
              <div class="message-text">
                <template v-if="msg.status === 'error'">
                  <span style="color: #e74c3c">消息生成失败：{{ msg.error || '未知错误' }}</span>
                </template>
                <template v-else>
                  <span v-html="formatMessage(msg.answer)"></span>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Loading 状态 -->
      <div v-if="props.loading" class="msg-row ai">
        <div class="msg-bubble loading">
          <span class="avatar">🤖</span>
          <div class="msg-content">
            <div class="loading-text">
              <span class="loading-dots">正在思考中</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <form class="chat-input" @submit.prevent="onSend">
      <div class="input-wrapper">
        <input 
          v-model="input" 
          placeholder="请输入您的问题..." 
          required 
          class="msg-input"
          :disabled="props.loading"
        />
        <button type="submit" :disabled="props.loading || !input.trim()" class="send-btn">
          <span v-if="!props.loading">发送</span>
          <span v-else class="loading-spinner">⏳</span>
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, nextTick, watch } from 'vue'
import { askDify } from '../api.js'

const input = ref('')
const props = defineProps({
  conversationId: String,
  messages: Array,
  loading: Boolean
})
const emit = defineEmits(['newConversationCreated', 'refreshConversations', 'sendMessage'])
const historyRef = ref(null)

function scrollToBottom() {
  nextTick(() => {
    if (historyRef.value) {
      historyRef.value.scrollTop = historyRef.value.scrollHeight
    }
  })
}

watch(() => props.messages, scrollToBottom, { deep: true })
watch(() => props.loading, scrollToBottom)

// 格式化消息内容，将 Markdown 转换为 HTML
function formatMessage(content) {
  if (!content) return ''
  return content
    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
    .replace(/^#### (.*$)/gim, '<h4>$1</h4>')
    .replace(/^##### (.*$)/gim, '<h5>$1</h5>')
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/```bash\n([\s\S]*?)\n```/g, '<pre class="code-block"><code>$1</code></pre>')
    .replace(/```([\s\S]*?)```/g, '<pre class="code-block"><code>$1</code></pre>')
    .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
    .replace(/^-\s+(.*$)/gim, '<li>$1</li>')
    .replace(/\n/g, '<br>')
    .replace(/(<li>.*<\/li>)/g, '<ul>$1</ul>')
    .replace(/<\/ul>\s*<ul>/g, '')
}

function onSend() {
  if (!input.value.trim()) return
  emit('sendMessage', input.value.trim())
  input.value = ''
}
</script>

<style scoped>
.chat-container {
  width: 100%;
  max-width: 900px;
  min-width: 500px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-height: 700px;
  overflow: hidden;
  margin: 0 auto;
}

.chat-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 20px;
  text-align: center;
}

.chat-header h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.chat-header p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  max-height: 600px;
  background: #f8f9fa;
}

.msg-row {
  display: flex;
  margin-bottom: 16px;
}

.msg-row.user {
  justify-content: flex-end;
}

.msg-row.ai {
  justify-content: flex-start;
}

.msg-bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 18px;
  background: #fff;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.msg-bubble.welcome {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  max-width: 90%;
}

.msg-row.user .msg-bubble {
  background: #007bff;
  color: white;
}

.msg-row.ai .msg-bubble {
  background: #fff;
  color: #333;
  border: 1px solid #e9ecef;
}

.msg-bubble.loading {
  opacity: 0.8;
}

.avatar {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.msg-content {
  flex: 1;
  min-width: 0;
}

.welcome-text {
  font-weight: 600;
  margin-bottom: 6px;
}

.welcome-hint {
  font-size: 13px;
  opacity: 0.9;
}

.user-ip {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 4px;
  font-weight: 500;
}

.message-text {
  line-height: 1.5;
  word-wrap: break-word;
}

.loading-text {
  display: flex;
  align-items: center;
  gap: 4px;
}

.loading-dots {
  position: relative;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

.chat-input {
  padding: 20px;
  background: #fff;
  border-top: 1px solid #e9ecef;
}

.input-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
}

.msg-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 25px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
}

.msg-input:focus {
  border-color: #007bff;
}

.msg-input:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
}

.send-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.send-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 滚动条样式 */
.chat-history::-webkit-scrollbar {
  width: 6px;
}

.chat-history::-webkit-scrollbar-track {
  background: transparent;
}

.chat-history::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.chat-history::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.chat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #f5f6fa;
  height: 100%;
}

.chat-list li {
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
  transition: background 0.2s;
}

.chat-list li:last-child {
  border-bottom: none;
}

.chat-list li:hover {
  background: #f0f4ff;
}

.chat-list li.active {
  background: #e6f0ff;
  font-weight: bold;
}
</style> 